import React, { useState,useEffect } from 'react';
import {
  Button,
  Text,
  TextInput,
  View,
  ScrollView,
  Pressable,
  StyleSheet,
  Image,
  FlatList,
} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { useNavigation } from "@react-navigation/native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import axios from "axios";
const ActivityTypes = [
  "自习",
  "电影",
  "聚餐",
  "拼车",
  "拼单",
  "游戏",
  "运动",
  "旅行",
  "其他",
];
const color = [
  "#4094F7",
  "#FE6386",
  "#F6A514",
  "#FD7C42",
  "#FE655F",
  "#00B773",
  "#B758FD",
  "#03BBD1",
  "#4CA4FD",
];

const Search = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const navigation = useNavigation();
  const [selectedActivity, setSelectedActivity] = useState("");
  const [postText, setPostText] = useState("");
  const [userInfo, setUserInfo] = useState({});
  const [activityList, setActivityList] = useState([]);
  const activity = [
    {
      key: "1",
      icon: "female",
      iconcolor: "#EA7C75",
      tag: "游戏",
      title: "下午杭麻三缺一不打钱2-5",
      name: "多多混子1",
      time: "1小时前",
      bgColor: "#B758FD",
    },
    {
      key: "2",
      icon: "male",
      iconcolor: "#667EBA",
      tag: "拼车",
      title: "下午杭麻三缺一打钱2-5",
      name: "多多混子2",
      time: "1小时前",
      bgColor: "#FE7E41",
    },
    {
      key: "3",
      icon: "male",
      iconcolor: "#667EBA",
      tag: "运动",
      title: "下午杭麻三缺一发钱2-5",
      name: "多多混子3",
      time: "1小时前",
      bgColor: "#B758FD",
    },
    {
      key: "4",
      icon: "female",
      iconcolor: "#EA7C75",
      tag: "聚餐",
      title: "下午杭麻三缺一送钱2-5",
      name: "多多混子4",
      time: "1小时前",
      bgColor: "#FE7E41",
    },
    {
      key: "5",
      icon: "female",
      iconcolor: "#EA7C75",
      tag: "聚餐",
      title: "下午杭麻三缺一送钱2-5",
      name: "多多混子4",
      time: "1小时前",
      bgColor: "#FE7E41",
    },
    {
      key: "6",
      icon: "female",
      iconcolor: "#EA7C75",
      tag: "聚餐",
      title: "下午杭麻三缺一送钱2-5",
      name: "多多混子4",
      time: "1小时前",
      bgColor: "#FE7E41",
    },
  ];
  useEffect(() => {
    (async () => {
      const userinfo = await AsyncStorage.getItem("userInfo");
      if (userinfo) {
        setUserInfo(JSON.parse(userinfo));
      }
      // await axios
      //     .get("http://47.111.227.58:3000/dynamic/getactivity")
      //     .then((res) => {
      //         console.log(res.data.results);
      //         setActivityList(res.data.results);
      //         //   setDy_id(res.data.results[0].id);
      //     });
    })();
  }, []);
  useEffect(() => {
    (async () => {
      if (userInfo.username) {
        // axios.get("http://47.111.227.58:3000/dynamic/getUserPostedAndMarkedDynamics", {
        //   params: {
        //     username: userInfo.username
        //   }
        // })
        //   .then((res) => {
        //     console.log(res.data);
        //     let postedDynamics = [];
        //     let markedDynamics = [];
        //     if (res.data.postedDynamics !== null) {
        //       postedDynamics = res.data.postedDynamics;
        //     }
        //     if (res.data.markedDynamics !== null) {
        //       markedDynamics = res.data.markedDynamics;
        //     }
        //     postedDynamics.push(...markedDynamics);
        //     setActivityList(postedDynamics);
        //     //   setDy_id(res.data.results[0].id);
        //   });
      }
    })();
  }, [userInfo]);

  const tagsData = ActivityTypes.map((type, index) => ({
    type: type,
    iconColorKey: `TagColor${(index % 9) + 1}`,
    color: color[index],
  }));
  const handleTagPress = (type) => {
    setSelectedActivity(type);
  };
  const getdynamicByContentAndBoard = async () => {
    // const url = selectedTab === '热度'
    //     ? 'http://47.111.227.58:3000/dynamic/getdynamicByContent'
    //     : 'http://47.111.227.58:3000/dynamic/getdynamicByContentByTime';
    axios.get('http://47.111.227.58:3000/dynamic/getActivityByContentByTime', {
        params: {
            content: searchQuery
        },
    })
        .then(res => {
            // console.log(res.data);
            setActivityList(res.data.results)
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
}
  const renderItem = ({ item }) => {
    return (
      <Pressable
        onPress={() => navigation.navigate("局情", { id: item.id })}
      >
        <View style={styles.activityItem}>
          <View
            style={[
              styles.activityColor,
              { backgroundColor: color[ActivityTypes.indexOf(item.board)] },
            ]}
          >
            <Text style={styles.activityColorText}>{item.board}</Text>
          </View>
          <View style={styles.activityContent}>
            <View style={styles.activityContentTop}>
              <Text style={styles.activityContentText}>{item.desc}</Text>
            </View>
            <View style={styles.activityContentBottom}>
              <Text style={styles.activityContentBottomText1}>
                局长: {item.username}
                {/* <Icon1 name={item.icon} size={14} color={item.iconcolor}></Icon1> */}
              </Text>
              <Text style={styles.activityContentBottomText2}>
                {item.uploadTime}
              </Text>
            </View>
          </View>
        </View>
      </Pressable>
    );
  };
  return (
    <ScrollView style={styles.container}>
      {/* 搜索栏 */}
      <View style={styles.searchBar}>
        <Ionicons name="search" size={22} color="#C5C5C5" style={styles.searchIcon} />
        <TextInput
          placeholder="请输入搜索关键词"
          placeholderTextColor="#7F7D79"
          style={styles.searchInput}
          value={searchQuery}
          onChangeText={setSearchQuery}
          onSubmitEditing={getdynamicByContentAndBoard}
        />
      </View>
      <FlatList
        data={activityList}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FAD874',
  },
  searchBar: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#FAD874',
    borderRadius: 5,
    padding: 10,
    margin: 10,
    borderColor: '#222222',
    borderWidth: 2,
    boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.1)',
  },
  searchIcon: {
    marginRight: 8,
  },
  searchInput: {
    flex: 1,
    fontSize: 16,
    color: '#222222',
  },
  // container1: {
  //   backgroundColor: "#FAD874",
  //   width: "100%",
  //   height: "100%",
  //   paddingTop: Constants.statusBarHeight,
  // },
  header: {
    flexDirection: "row",
    padding: 10,
  },
  headertitle1: {
    color: "#241B23",
    fontSize: 12,
    fontWeight: "bold",
    marginTop: 10,
    textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)',
  },
  headertitle2: {
    color: "#F86869",
    fontSize: 20,
    fontWeight: "bold",
    marginLeft: 5,
    marginRight: 5,
    textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)',
  },
  guide: {},
  guideimage: {
    width: "94%",
    margin: 10,
    marginRight: 20,
    marginTop: -20,
  },
  Button: {
    flexDirection: "row",
    width: "100%",
    justifyContent: "space-between",
    marginTop: -25,
  },
  button: {
    width: "50%",
    marginTop: -10,
  },
  buttonimageleft: {
    width: "90%",
    marginLeft: 10,
  },
  buttonimageright: {
    width: "90%",
    marginTop: -7,
    marginLeft: 8,
  },
  Tags: {
    width: "100%",
    height: "15%",
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
  },
  TopTags: {
    flexDirection: "row",
    width: "100%",
    height: "50%",
  },
  BottomTags: {
    flexDirection: "row",
    width: "100%",
    height: "50%",
    marginTop: -10,
  },
  Tag: {
    flexDirection: "row",
    width: "18%",
    backgroundColor: "#FFFDF1",
    borderBlockColor: "#000",
    borderWidth: 2,
    borderRadius: 5,
    boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.1)',
    margin: 10,
    marginLeft: 6,
    marginRight: 0,
    display: "flex",
    alignItems: "center",
    // padding: 5,
  },
  TagColor1: {
    width: "10%",
    height: "100%",
    backgroundColor: "#4094F7",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor2: {
    width: "10%",
    height: "100%",
    backgroundColor: "#FE6386",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor3: {
    width: "10%",
    height: "100%",
    backgroundColor: "#F6A514",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor4: {
    width: "10%",
    height: "100%",
    backgroundColor: "#FD7C42",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor5: {
    width: "10%",
    height: "100%",
    backgroundColor: "#FE655F",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor6: {
    width: "10%",
    height: "100%",
    backgroundColor: "#00B773",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor7: {
    width: "10%",
    height: "100%",
    backgroundColor: "#B758FD",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor8: {
    width: "10%",
    height: "100%",
    backgroundColor: "#03BBD1",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor9: {
    width: "10%",
    height: "100%",
    backgroundColor: "#4CA4FD",
    display: "flex",
    alignItems: "flex-start",
  },
  TagIcon: {
    color: "#9B999C",
    display: "flex",
  },
  TagTitle: {
    fontSize: 14,
    fontWeight: "bold",
    color: "#9B999C",
    display: "flex",
  },
  TagContent: {
    fontSize: 14,
    fontWeight: "bold",
    color: "#24201D",
    display: "flex",
    marginLeft: 12,
  },
  activityItem: {
    // width: '95%',
    // height: '15%',
    backgroundColor: "#FFFDF1",
    flexDirection: "row",
    borderBlockColor: "#000",
    borderWidth: 2,
    borderRadius: 5,
    boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.1)',
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 5,
  },
  activityColor: {
    width: "15%",
    backgroundColor: "#B758FD",
    borderRadius: 2,
    flexDirection: "column",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  activityColorText: {
    display: "flex",
    fontSize: 26,
    fontWeight: "bold",
    color: "#FDFDFB",
    // flexDirection: 'column',
  },
  activityContent: {
    width: "85%",
    // height: '100%',
    flexDirection: "column",
    justifyContent: "space-between",
    marginTop: 5,
    marginBottom: 5,
  },
  activityContentTop: {
    // width: '95%',
    // height: '65%',
    display: "flex",
    flexDirection: "row",
    paddingLeft: 10,
    alignItems: "center",
  },
  activityContentText: {
    display: "flex",
    fontSize: 16,
    fontWeight: "bold",
    color: "#262220",
    // marginLeft: 10,
  },
  activityContentBottom: {
    flexDirection: "row",
    // width: '95%',
    // height: '35%',
    display: "flex",
    justifyContent: "space-between",
  },
  activityContentBottomText1: {
    fontSize: 14,
    // fontWeight: 'bold',
    color: "#5A678B",
    paddingLeft: 10,
  },
  activityContentBottomText2: {
    fontSize: 14,
    fontWeight: "bold",
    color: "#797572",
    paddingLeft: 10,
    paddingRight: 10,
  },
  searchButtonContainer: {
    position: "absolute",
    flexDirection: "row",
    right: 10,
    bottom: 10,
    backgroundColor: "#FD6A63",
    padding: 10,
    borderRadius: 25,
    // width: 150,
    alignItems: "center",
  },
});

export default Search;